<!--
 * @Author: xuwejie 1529315455@qq.com
 * @Date: 2023-12-01 16:46:14
 * @LastEditors: xuwejie 1529315455@qq.com
 * @LastEditTime: 2023-12-01 17:15:31
 * @FilePath: \school-shop-vue\pages\settings\change_phone.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="page">
    <hx-navbar ref="hxnb" :config="config" @clickBtn="Btn" />

    <view class="content">
      <view class="content-box">
        <span class="content-box-user">手机号码</span>
        <u-input
          class="content-box-input"
          v-model="form.mobile"
          :border="formConfiguration.border"
          :height="formConfiguration.height"
          placeholder="请输入手机号码"
        />
        <span class="content-box-user">验证码</span>
        <view style="position: relative">
          <u-input
            class="content-box-input"
            v-model="form.msg_code"
            :border="formConfiguration.border"
            :height="formConfiguration.height"
            :clearable="false"
            placeholder="请输入短信验证码"
          />
          <span class="code" @click="countdown">{{ label }}</span>
        </view>
      </view>
    </view>
    <u-toast ref="uToast" />
    <view class="submit flex-center" @click="submit">保存</view>
  </view>
</template>

<script>
import { $https } from "@/static/js/request.js";
export default {
  data() {
    return {
      formConfiguration: {
        height: 100,
        border: true,
      },
      form: {
        // name: null, // 收件人名称
        mobile: null, // 收件人手机号
        // menpai: null, // 收件人门牌号
        msg_code: null, //验证码
      },
      config: {
        title: "绑定手机",
        color: "#333333",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#ffffff", "#ffffff"]],
        // 滑动屏幕后切换颜色，注意颜色为数组时长度必须一样，还有使用滑动切换必须监听 onPageScroll 事件
        slideBackgroundColor: [0, ["#ffffff", "#ffffff"]],
        // 状态栏 ，数组则为滑动变色
        statusBarBackground: ["", "#ffffff"],
      },

      label: "获取验证码",
      state: false, // 当点击获取验证码后，将该值变更为true，当为true时无法再次点击
      code: null,
    };
  },
  onShow() {
    this.verifyResult();
  },
  // mounted() {
  //   console.log("22222");
  // },

  methods: {
    verifyResult() {
      $https(
        "GET",
        "getCode",
        {},
        (res) => {
          if (res.data.errcode == 0) {
            this.code = res.data.data.code;
          } else {
            this.$u.toast("验证失败，请联系客服");
            // this.$refs.verifyElement.reset();
          }
        },
        true
      );
    },
    // 表单验证
    volidInfo() {
      let form = this.form;
      let checkphone = this.volidPhone();
      if (!checkphone) {
        return false;
      } else if (!form.msg_code) {
        this.$u.toast("请输入验证码");
        return false;
      } else return true;
    },
    //验证手机号
    volidPhone() {
      if (!this.form.mobile) {
        this.$u.toast("请输入手机号");
        return false;
      } else if (
        !/^((0\d{2,3}-\d{7,8})|(1[23567894]\d{9}))$/.test(this.form.mobile)
      ) {
        uni.showToast({
          title: "手机号格式错误",
          icon: "none",
        });
        return false;
      }
      return true;
    },

    countdown() {
      let volidPhone = this.volidPhone();
      if (this.code && volidPhone) {
        if (!this.state) {
          let num = 60;
          this.label = num + "s";
          this.state = true;
          let terval = setInterval(() => {
            num--;
            if (num <= 0) {
              clearInterval(terval);
              this.label = "重新获取";
              this.state = false;
              return;
            }
            this.label = num + "s";
          }, 1000);
          $https(
            "GETN",
            "sendMsgCode",
            { code: this.code, mobile: this.form.mobile },
            (res) => {
              uni.hideLoading();
              // 这里此提示会被this.start()方法中的提示覆盖
              this.$u.toast("验证码已发送");
              // 通知验证码组件内部开始倒计时
              // this.$refs.uCode.start();
            },
            true
          );
        } else {
          this.$u.toast("倒计时结束后再发送");
        }
      }
    },

    submit() {
      let volid = this.volidInfo();
      if (volid) {
        let data = JSON.parse(JSON.stringify(this.form));
        $https(
          "POST",
          "changeMobile",
          data,
          (res) => {
            if (res.data.errcode == 0) {
              this.$u.toast("绑定成功");
            } else {
              this.$u.toast(res.data.errmsg);
            }
          },
          true
        );
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  .content {
    width: 100%;
    padding: 0 30rpx;
    &-box {
      width: 100%;
      background: #fff;
      border-radius: 20rpx;
      padding: 35rpx;
      margin-top: 20rpx;
      &-user {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
      }
      &-input {
        margin-top: 20rpx;
        margin-bottom: 20rpx;
      }
      .code {
        position: absolute;
        right: 20rpx;
        top: 24rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
      }
    }
  }

  .submit {
    width: 566rpx;
    height: 88rpx;
    color: #fff;
    background: #40ae36;
    box-shadow: 0px 2rpx 14rpx 2rpx rgba(0, 0, 0, 0.2);
    border-radius: 48rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: bold;
    margin: auto;
    margin-top: 70rpx;
  }
}

/deep/.hx_font_size {
  font-weight: bold;
}

/deep/ .u-input__input {
  min-height: 80rpx !important ;
}
</style>